﻿@using Blazorise.Docs.Services
@using Blazorise.Docs.Models
@inherits BaseDocsLayout

<Layout Sider Class="b-docs">
    <LayoutSider>
        <LayoutSiderContent>
            <Bar @ref="@sideBar" Breakpoint="Breakpoint.Desktop" NavigationBreakpoint="Breakpoint.Tablet" ThemeContrast="@ThemeService.BarThemeContrast" Shadow="Shadow.Default"
                 Mode="BarMode.VerticalInline" CollapseMode="BarCollapseMode.Hide" MenuToggleBehavior="BarMenuToggleBehavior.AllowSingleMenu">
                <BarBrand>
                    <BarItem>
                        <BarLink To="docs">
                            <BarIcon IconName="customIcon" Display="Display.InlineBlock" />
                            Blazorise Docs
                        </BarLink>
                    </BarItem>
                </BarBrand>
                <BarMenu>
                    <BarStart>
                        <BarItem Margin="Margin.Is2.OnAll">
                            <Autocomplete TItem="PageEntry"
                                          TValue="string"
                                          Data="@SearchMenuProvider.Entries"
                                          FreeTyping
                                          TextField="@(( item ) => item.Name)"
                                          ValueField="@(( item ) => item.Url)"
                                          @bind-SelectedText="selectedSearchText"
                                          Placeholder="Search..."
                                          Filter="AutocompleteFilter.Contains"
                                          CustomFilter="@(( item, searchValue ) => item.Name.IndexOf( searchValue, 0, StringComparison.CurrentCultureIgnoreCase ) >= 0)"
                                          SelectedValueChanged="@ComponentSearchSelectedValueChanged">
                                <NotFoundContent>
                                    Sorry... @context was not found! :(
                                </NotFoundContent>
                            </Autocomplete>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs">
                                <BarIcon IconName="IconName.Home" /> Overview
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs/start">
                                <BarIcon IconName="IconName.Directions" /> Quick Start
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarIntegrationsMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.BookReader" /> Integrations
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/usage/ant-design/">Ant Design</BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/bootstrap4/">Bootstrap 4</BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/bootstrap5/">Bootstrap 5</BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/bulma/">Bulma</BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/fluent2/" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Fluent 2</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/material/">Material</BarDropdownItem>
                                    <BarDropdownItem To="docs/usage/tailwind/">Tailwind</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs/testing">
                                <BarIcon IconName="IconName.CheckDouble" /> Testing
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs/templates">
                                <BarIcon IconName="IconName.File" /> Templates
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs/usage/licensing/register-product-token">
                                <BarIcon IconName="IconName.Key" /> Licensing
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarLink To="docs/theming">
                                <BarIcon IconName="IconName.Brush" /> Theming
                            </BarLink>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarComponentsMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Wrench" /> Components
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/components/accordion">Accordion</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/addon">Addon</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/alert">Alert</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/badge">Badge</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/bar">Bar</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/breadcrumb">Breadcrumb</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/button">Button</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/card">Card</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/carousel">Carousel</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/check">Check</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/close-button">Close Button</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/collapse">Collapse</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/color-edit">Color Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/color-picker">Color Picker</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/date-edit">Date Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/date-picker">Date Picker</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/divider">Divider</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/drag-drop">Drag Drop</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/dropdown">Dropdown</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/field">Field</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/figure">Figure</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/file-edit">File Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/file-picker">File Picker</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/focus-trap">FocusTrap</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/highlighter">Highlighter</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/image">Image</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/jumbotron">Jumbotron</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/layout">Layout</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/link">Link</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/list-group">List Group</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/input-mask">Input Mask</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/memo-edit">Memo Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/modal">Modal</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/offcanvas">Offcanvas</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/numeric-edit">Numeric Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/numeric-picker">Numeric Picker</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/pagination">Pagination</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/progress">Progress</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/radio">Radio</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/rating">Rating</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/repeater">Repeater</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/select">Select</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/skeleton" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Skeleton</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/components/slider">Slider</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/step">Step</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/switch">Switch</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/tab">Tab</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/table">Table</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/time-edit">Time Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/time-picker">Time Picker</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/toast" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Toast</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/components/tooltip">Tooltip</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/text-edit">Text Edit</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/typography">Typography</BarDropdownItem>
                                    <BarDropdownItem To="docs/components/validation">Validation</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarExtensionsMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.PuzzlePiece" /> Extensions
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/extensions/autocomplete">Autocomplete</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/animate">Animate</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/captcha">Captcha</BarDropdownItem>
                                    <BarDropdown>
                                        <BarDropdownToggle>Chart</BarDropdownToggle>
                                        <BarDropdownMenu>
                                            <BarDropdownItem To="docs/extensions/chart">Start Here</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/chart-annotation">Annotation</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/chart-datalabels">DataLabels</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/chart-live">Live Chart</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/chart-trendline">Trendline</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/chart-zoom">Zoom</BarDropdownItem>
                                        </BarDropdownMenu>
                                    </BarDropdown>
                                    <BarDropdown>
                                        <BarDropdownToggle>DataGrid</BarDropdownToggle>
                                        <BarDropdownMenu>
                                            <BarDropdownItem To="docs/extensions/datagrid/getting-started">Getting Started</BarDropdownItem>

                                            <BarDropdown>
                                                <BarDropdownToggle>Binding Data</BarDropdownToggle>
                                                <BarDropdownMenu>
                                                    <BarDropdownItem To="docs/extensions/datagrid/binding-data/in-memory">In Memory</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/binding-data/large-data">From an External Source</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/binding-data/virtualize">Virtualize</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/binding-data/observable">Observable Collections</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/binding-data/dynamic">Dynamic</BarDropdownItem>
                                                </BarDropdownMenu>
                                            </BarDropdown>

                                            <BarDropdownItem To="docs/extensions/datagrid/aggregates">Aggregates</BarDropdownItem>

                                            <BarDropdownItem To="docs/extensions/datagrid/columns">Columns</BarDropdownItem>

                                            <BarDropdown>
                                                <BarDropdownToggle>Features</BarDropdownToggle>
                                                <BarDropdownMenu>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/paging">Paging</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/sorting">Sorting</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/editing" Flex="Flex.JustifyContent.Between">
                                                        <DocsNewFeatureBadge>Editing</DocsNewFeatureBadge>
                                                    </BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/filtering">Filtering</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/reordering" Flex="Flex.JustifyContent.Between">
                                                        <DocsNewFeatureBadge>Reordering</DocsNewFeatureBadge>
                                                    </BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/resizing">Resizing</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/auto-generate-columns">Auto Generate Columns</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/column-chooser">Column Chooser</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/fixed-columns">Fixed Columns</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/fixed-header">Fixed Header</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/context-menu">Context Menu</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/grouping">Grouping</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/header-group">Header Group</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/state-management">State Management</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/mobile-mode" Flex="Flex.JustifyContent.Between.AlignItems.Center">
                                                        <DocsNewFeatureBadge>Mobile Mode</DocsNewFeatureBadge>
                                                    </BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/features/accessibility" Flex="Flex.JustifyContent.Between.AlignItems.Center">
                                                        <DocsNewFeatureBadge>Accessibility</DocsNewFeatureBadge>
                                                    </BarDropdownItem>
                                                </BarDropdownMenu>
                                            </BarDropdown>

                                            <BarDropdown>
                                                <BarDropdownToggle>Selection</BarDropdownToggle>
                                                <BarDropdownMenu>
                                                    <BarDropdownItem To="docs/extensions/datagrid/selection/single">Single</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/selection/multiple">Multiple</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/selection/cell">Cell</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/selection/custom-row-colors">Custom Row Colors</BarDropdownItem>
                                                </BarDropdownMenu>
                                            </BarDropdown>

                                            <BarDropdown>
                                                <BarDropdownToggle>Templates</BarDropdownToggle>
                                                <BarDropdownMenu>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/display">Display</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/edit">Edit</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/detail-row">Detail Row</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/commands">Commands</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/loading">Loading</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/button-row">Button Row</BarDropdownItem>
                                                    <BarDropdownItem To="docs/extensions/datagrid/templates/row-overlay">Row Overlay</BarDropdownItem>
                                                </BarDropdownMenu>
                                            </BarDropdown>

                                            <BarDropdownItem To="docs/extensions/datagrid/validations">Validations</BarDropdownItem>
                                        </BarDropdownMenu>
                                    </BarDropdown>
                                    <BarDropdownItem To="docs/extensions/dropdownlist">DropdownList</BarDropdownItem>
                                    <BarDropdown>
                                        <BarDropdownToggle>Icons</BarDropdownToggle>
                                        <BarDropdownMenu>
                                            <BarDropdownItem To="docs/extensions/icons">Usage</BarDropdownItem>
                                            <BarDropdownItem To="docs/extensions/icons-available">Available Icons</BarDropdownItem>
                                        </BarDropdownMenu>
                                    </BarDropdown>
                                    <BarDropdownItem To="docs/extensions/cropper">Cropper</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/fluent-validation">FluentValidation</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/list-view">ListView</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/loadingindicator">LoadingIndicator</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/lottie-animation">LottieAnimation</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/markdown">Markdown</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/qrcode">QRCode</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/pdfviewer" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>PdfViewer</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/richtextedit">RichTextEdit</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/routertabs" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>RouterTabs</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/scheduler" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Scheduler</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/selectlist">SelectList</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/sidebar">Sidebar</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/signaturepad">SignaturePad</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/snackbar">Snackbar</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/spinkit">SpinKit</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/splitter">Splitter</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/treeview">TreeView</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/transferlist">TransferList</BarDropdownItem>
                                    <BarDropdownItem To="docs/extensions/video">Video</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarServicesMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Comment" /> Services
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/services/message-provider">Message Provider</BarDropdownItem>
                                    <BarDropdownItem To="docs/services/modal-provider">Modal Provider</BarDropdownItem>
                                    <BarDropdownItem To="docs/services/notification-provider">Notification Provider</BarDropdownItem>
                                    <BarDropdownItem To="docs/services/offcanvas-provider" Flex="Flex.JustifyContent.Between.AlignItems.Start">
                                        <DocsNewFeatureBadge>Offcanvas Provider</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/services/page-progress-provider">PageProgress Provider</BarDropdownItem>
                                    <BarDropdownItem To="docs/services/toast-provider" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Toast Provider</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarHelpersMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Flask" />
                                    Helpers
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/helpers/colors">Colors</BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/utilities/css-grid" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>CSS Grid</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/utilities/grid">Grid</BarDropdownItem>
                                    <BarDropdown>
                                        <BarDropdownToggle>Enums</BarDropdownToggle>
                                        <BarDropdownMenu>
                                            <BarDropdownItem To="docs/helpers/enums/common">Common</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/bar">Bar</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/button">Button</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/datagrid">DataGrid</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/date">Date</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/divider">Divider</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/dropdown">Dropdown</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/heading">Heading</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/icon">Icon</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/listgroup">ListGroup</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/snackbar">Snackbar</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/spinkit">SpinKit</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/table">Table</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/tabs">Tabs</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/text">Text</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/tooltip">Tooltip</BarDropdownItem>
                                            <BarDropdownItem To="docs/helpers/enums/validation">Validation</BarDropdownItem>
                                        </BarDropdownMenu>
                                    </BarDropdown>
                                    <BarDropdownItem To="docs/helpers/localization">Localization</BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/utilities/object-fit" Flex="Flex.JustifyContent.Between">
                                        <DocsNewFeatureBadge>Object Fit</DocsNewFeatureBadge>
                                    </BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/utilities/position">Position</BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/sizes">Sizes</BarDropdownItem>
                                    <BarDropdownItem To="docs/helpers/utilities">Utilities</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarSpecificationsMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.Book" /> Specifications
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/specifications">Introduction</BarDropdownItem>
                                    <BarDropdownItem To="docs/specifications/autocomplete">Autocomplete</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                        <BarItem>
                            <BarDropdown @bind-Visible="@sideBarMetaMenuVisible">
                                <BarDropdownToggle>
                                    <BarIcon IconName="IconName.QuestionCircle" /> Meta
                                </BarDropdownToggle>
                                <BarDropdownMenu>
                                    <BarDropdownItem To="docs/faq">FAQ</BarDropdownItem>
                                    <BarDropdownItem To="license">License</BarDropdownItem>
                                </BarDropdownMenu>
                            </BarDropdown>
                        </BarItem>
                    </BarStart>
                </BarMenu>
            </Bar>
        </LayoutSiderContent>
    </LayoutSider>
    <Layout>
        <LayoutHeader ElementId="b-docs-layout-header">
            <Bar Class="b-top-bar" @ref="@topBar" @bind-Visible="@topBarVisible"
                 Breakpoint="Breakpoint.Desktop" Background="@ThemeService.BarBackground" ThemeContrast="@ThemeService.BarThemeContrast">
                <BarToggler Bar="@sideBar" Border="Border.Is0" />
                <BarMenu>
                    <BarStart>
                        <BarItem Margin="Margin.Is3.FromEnd">
                            <BarLink To="" Shadow="Shadow.Small" Border="Border.Rounded.Is1.Primary.OnBottom.Is1.Primary.OnTop" TextWeight="TextWeight.Normal">
                                Home
                            </BarLink>
                        </BarItem>
                        <DocsVersionMenu />
                        <TopMenuStart />
                    </BarStart>
                    <BarEnd>
                        <TopMenuEnd />
                    </BarEnd>
                </BarMenu>
            </Bar>
        </LayoutHeader>
        <CascadingValue Value="@this" IsFixed>
            <LayoutContent Padding="Padding.Is0.OnX.Is4.OnY.Is4.OnWidescreen">
                <Container Breakpoint="Breakpoint.Widescreen">
                    <Row>
                        <Column ColumnSize="ColumnSize.Is12.Is10.OnDesktop" Class="b-docs-page">
                            @if ( isRouterTabsExample )
                            {
                                <RouterTabs />
                            }
                            else
                            {
                                @Body
                            }
                        </Column>
                        <Column ColumnSize="ColumnSize.Is2.OnDesktop">
                            <Toc />
                        </Column>
                    </Row>
                </Container>
            </LayoutContent>
        </CascadingValue>
    </Layout>
</Layout>
@code {
    RenderFragment customIcon =@<Image Source="/img/logos/blazorise-small.svg" Text="Small Blazorise logo" Style="width:32px; height: 32px" />;
}